<template>
  <div id="app">
    <header>
      <div class="logo">logo</div>
    </header>
    <div class="content">
      <nav>
        <router-link to="/personal" class="Personal">个人信息管理</router-link>
        <router-link to="/login" class="Login">上下班打卡</router-link>
        <router-link to="/register" class="Register">工资明细</router-link>
        <router-link to="/register" class="Register">人事部</router-link>
        <router-link to="/register" class="Register">其他</router-link>
      </nav>
      <section>
        <router-view>
        </router-view>
      </section>
    </div>


  </div>
</template>

<script>

  export default {
    name: 'App',
    components: {
    },

  }
</script>

<style>
  *{
    padding: 0;
    margin: 0;
    list-style: none;
  }
  #app {
    text-align: center;
    color: #2c3e50;
  }
  body{
    overflow: hidden;
  }
  header{
    width: 100%;
    height: 100px;
    background-color: #eee;
  }
  header .logo{
    text-align: center;
    width: 200px;
    height: 100%;
    background-color: orange;
  }
  .content{
    width: 100%;
    height: 700px;
  }
  nav{
    width: 10%;
    height: 100px;
    background-color: orangered;
    list-style: none;
    float: left;
  }
  .Personal,.Login,.Register{
    font-size: 24px;
    height: 50px;
    list-style: none;
    text-decoration: none;
    display: block;
    background-color: #eee;
    border: 1px solid #aaa;
  }
  section{
    width: 90%;
    height: 100%;
    background-color: #fff;
    float: left;
  }


</style>
